import React, {useState, useMemo,useRef} from 'react'
import {Button,Input,Divider} from 'antd'

import UseMemoChild from './UseMemoChild'
export default function UseMemo() {
  console.log("=======parent render =======")
  const [data, setData] = useState({a:0,b:0,c:0})
  
  
  return (
    <div style={{marginTop: 20}}>
       点击a++,b++,c++后看console,<br/>tempB每次都被计算(无论b是否修改),<br/>但tempA就不是,因为用了useMemo（依赖值a没有改变），<br/>结论：可以通过useMemo进行性能优化(类似之前版本的生命周期函数shouldUpdateComponent)
        <Divider></Divider>
      a:{data.a} <Button type="primary" onClick={ ()=> {setData({...data,a:data.a+1})}}>a++ </Button><br/>
      b:{data.b} <Button type="primary" onClick={ ()=> {setData({...data,b:data.b+1})}}>b++ </Button><br/>
      c:{data.c} <Button type="primary" onClick={ ()=> {setData({...data,c:data.c+1})}}>c++ </Button>
   
      <UseMemoChild {...data}></UseMemoChild>
    </div>
  )
}